// 教室控制页js
$(function(){
    // 判断用户是否登录
    if(sh.isLogin){


    }else{


    }

    //页面初始化时，默认显示不限类型的数据
    // classesList是不限类型的模拟数据，后台通过ajax获取，回调sh.createList方法渲染列表
    var classesList = [
        {
            id:0,
            classTitle:"关山高中高二美术集训关山高中高二美术集训",
            time:"2018/12/07 18:00",
            timeStatus:1, // timeStatus为时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000000", // 空间号为8位
        },
        {
            id:1,
            classTitle:"光谷高中高三物理集训",
            time:"2018/11/07 15:00",
            timeStatus:2,// 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000001",
        },
        {
            id:2,
            classTitle:"武汉小学一年级数学集训",
            time:"2018/12/25 17:00",
            timeStatus:3,// 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000002",
        },
        {
            id:3,
            classTitle:"武汉小学三年级语文集训",
            time:"2018/10/25 2:30",
            timeStatus:5,// 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000003",
        },
        {
            id:4,
            classTitle:"关山高中高二美术集训关山高中高二美术集训",
            time:"2018/12/07 18:00",
            timeStatus:1, // 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000004",
        },
        {
            id:5,
            classTitle:"光谷高中高三物理集训",
            time:"2018/11/07 15:00",
            timeStatus:2,// 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000005",
        },
        {
            id:6,
            classTitle:"武汉小学一年级数学集训",
            time:"2018/12/25 17:00",
            timeStatus:3,// 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000006",
        },
        {
            id:7,
            classTitle:"武汉小学三年级语文集训",
            time:"2018/10/25 2:30",
            timeStatus:1,// 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000007",
        },
        {
            id:8,
            classTitle:"关山高中高二美术集训关山高中高二美术集训",
            time:"2018/12/07 18:00",
            timeStatus:1, // 时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
            imageUrl:"images/bac/class_img.png",
            url:"javascript:void(0)",
            spaceNum:"35000008",
        }
    ];

    // 由于第一页有一个按钮，为保证分页正确显示，对象数组必须在最前面增加一条空数据为 创建课程按钮 占位
    classesList.unshift({});

    var defaultImgUrl = "images/bac/default_class_img.png";

    // sh.createList 第一个参数为需渲染的数据，第二个参数为一页显示的数量，第三个参数为需要渲染的dom外层节点,第四个参数为默认图片的地址，第五个参数是绘制时页面留在第几页
    sh.createList(classesList,3,".classes-list",defaultImgUrl);

    //点击卡片出现阴影动画
    $(".classes-list").on("click",".class-item",function () {
        $(this).addClass("active").siblings(".class-item").removeClass("active");
        $(this).siblings(".create-live-btn").removeClass("active");
    })
    $(".classes-list").on("click",".create-live-btn",function () {
        $(this).addClass("active").siblings(".class-item").removeClass("active");
    })

    // 二维码显示隐藏
    $(".scan-code").on("click",function(){
        $(".show-code").toggle();
    })

    // 点击卡片删除按钮，显示提示弹窗
    $(".classes-list").on("click",".del-class-btn",function(){
            // $(".window-tip").show();

        initConfirmWindow(".my-live-page","确认删除？");


            // 该条数据的id
            var thisId = $(this).attr("index");
            deleteClass(thisId);
    })
    // 点击弹窗上的按钮，删除或取消删除对应id的数据
    function deleteClass(id){
        // 点击提示框取消按钮，隐藏提示弹窗
        $(".window-tip").on("click",".tips-cancel-btn",function () {
            $(this).parent().parent(".window-tip").remove();
        })
        // 点击提示框确认按钮，将该条数据删除
        $(".window-tip").on("click",".tips-comfirm-btn",function () {

            // 后台将id作为参数通过ajax发送到后台，将对应的数据也进行删除
            classesList.forEach(function (item,index) {
                // 从数据列表中删掉对应id的数据
                (item.id == id) && classesList.splice(index,1);
            })
            // 隐藏提示框
            $(this).parent().parent(".window-tip").remove();

            //重绘列表时将页面停留在pageIndex页
            var pageIndex = parseInt($.trim($(".ui-pagination-page-item.active").attr("data-current")));
            sh.createList(classesList,3,".classes-list",defaultImgUrl,pageIndex);
        })
    }



})


// 翻页回调，对数据进行个性化渲染，targetUl是装载数据的容器，startIndex是第一条数据的id，endIndex是最后一条数据的id，data是获取到的数据,defaultImgUrl是默认图片
function getDataAndSortCallback(targetUl,startIndex,endIndex,data,defaultImgUrl){


    // 后台可在此通过发送startIndex、endIndex两个参数获取当前页的数据，用于服务端分页
    // ...
    var indexRange = endIndex-startIndex; // 需总共请求的数据条数
    var contentHtml = "";
    for (var j = startIndex; j < endIndex; j++){ // 服务器端分页改为for(var j=0; j < indexRange; j++)

        // timeStatus为时间类型：1=》正在进行，2=》即将开始(一天内)，3=》三天内，4=》一周内，5=》一月内，6=》一个月以上
           var timeRange = data[j].timeStatus == 1 ? "正在进行" :
                           data[j].timeStatus == 2 ? "即将开始" :
                           data[j].timeStatus == 3 ? "三天内" :
                           data[j].timeStatus == 4 ? "一周内" :
                           data[j].timeStatus == 5 ? "一月内" : "一个月以上"

            if(j==0){
                contentHtml = '<div class="create-live-btn"><a href="selectMovie.html">创建新的直播</a></div>';
            }else{
            // 将课程的id隐藏在.class-item、.del-class-btn、.edit-class-btn、.start-btn"的index属性里,删除或修改时找当前按钮对应的index即可ex:$(this).attr("index")
            // 此处将修改和开始的链接修改为该带上该课程的id号为参数的url，并在其他页面显示对应信息。
            contentHtml += '<div class="class-item" index="'+data[j].id+'"><a href="'+data[j].url+'"><div class="class-img"><img src='+data[j].imageUrl+' alt=""><div class="class-space-num">'+data[j].spaceNum+'</div></div><div class="class-info"><div class="class-title">'+data[j].classTitle+'</div><div class="row"><span class="class-time left">'+data[j].time+'</span><span class="class-status right">'+timeRange+'</span></div></div></a><div class="class-operate-btn"><ul><li class="del-class-btn" index="'+data[j].id+'"><a href="javascript:void(0)">删除</a></li><li class="edit-class-btn" index="'+data[j].id+'"><a href="selectMovie.html?id='+ data[j].id +'">修改</a></li><li class="start-btn" index="'+data[j].id+'"><a href="beginClass.html?id='+ data[j].id +'">开始</a></li></ul></div></div>';
            }

        }
    targetUl.append(contentHtml);

}
